<template>
  <div class="home">
    <Header></Header>
    <div class="home-header-img">
        <el-carousel :interval="2500" arrow="always" height="48vw">
          <el-carousel-item v-for="(item,index0) in CarouselMap.length" v-if="index0<5">
            <img v-if="item===index+1" v-for="(item1,index) in CarouselMap"  style="width: 100%;height:100%;object-fit: cover" :src='item1.photoAddress' alt="">
          </el-carousel-item>
        </el-carousel>
    </div>
    <!--    <div class="home-header-img">-->
    <!--    </div>-->
    <Home-About></Home-About>
    <Home-News></Home-News>
    <Home-Project></Home-Project>
    <Bottom></Bottom>
  </div>

</template>

<script>
const Header = () => import('../components/Header')
const Bottom = () => import('../components/Bottom')
const HomeNews = () => import('../components/homenews/HomeNews')
const HomeAbout = () => import('../components/homenews/HomeAbout')
const HomeProject = () => import('../components/homenews/HomeProject')

// import Header from '../components/Header'
// import Bottom from '../components/Bottom'
// import HomeNews from "../components/homenews/HomeNews";
// import HomeAbout from "../components/homenews/HomeAbout";
// import HomeProject from "../components/homenews/HomeProject";
export default {
  name: `Home`,
  components: {
    Header,
    Bottom,
    HomeNews,
    HomeAbout,
    HomeProject,
  },
  data() {
    return {
      CarouselMap:[],
      // imageURL1: require('@/assets/img/news/annualmeeting/IMG_8135.png'),
      // imageURL2: require('@/assets/img/news/annualmeeting/IMG_8049.png'),
      // imageURL3: require('@/assets/img/news/annualmeeting/IMG_8153.png'),
      // imageURL4: require('@/assets/img/news/annualmeeting/IMG_8167.png'),
    }
  },
  created: function () {
    // getma() {
    this.$nextTick(function () {
      this.$axios({
        url: '/officialwebsite/journalismFrontDesk/selectIsCarousel',
        method: 'get',
        // headers: {
        //   'X-CSRFToken': this.getCookie('csrftoken')
        // },
      }).then(res => {
        this.CarouselMap = res.obj
      })
    })
  },
}
</script>

<style scoped>
.home {
  background-color: #eeeeee;
}
.home-header-img {
  /*margin-top: 45px;*/
}

</style>
